<!DOCTYPE html>
<link rel="stylesheet" href="resources/compositor-touch-hit-rects.css">
<!-- This tests verifies that visibility:hidden objects do not create touch
action rects, but visibility:visible objects do. -->
<div id="tests">
  <div class="testcase" style="width: 100px; height: 100px; background: red; visibility: hidden;"></div>
  <div style="width: 100px; height: 100px; background: red; visibility: hidden;">
    <!-- This div should inherit the hidden visibility of the parent and be hidden. -->
    <div class="testcase" style="width: 30px; height: 30px; background: red;"></div>
  </div>
  <div style="width: 100px; height: 100px; background: red; visibility: hidden;">
    <!-- This div should override the hidden visibility of the parent and be visible. -->
    <div class="testcase" style="width: 40px; height: 40px; background: green; visibility: visible;"></div>
  </div>
  <div class="testcase" style="width: 100px; height: 100px; background: green; visibility: visible;"></div>

  <table class="testcase" style="width: 100px; height: 100px; background: red; visibility: hidden;"></table>
  <table class="testcase" style="width: 100px; height: 100px; background: green; visibility: visible;"></table>

  <table style="width: 100px; height: 100px;">
    <tr class="testcase" style="width: 100px; height: 100px; background: red; visibility: hidden;"><td></td></tr>
  </table>
  <table style="width: 100px; height: 100px;">
    <tr class="testcase" style="width: 100px; height: 100px; background: green; visibility: visible;"><td></td></tr>
  </table>

  <img class="testcase" style="width: 100px; height: 100px; background: red; visibility: hidden;"></img>
  <img class="testcase" style="width: 100px; height: 100px; background: green; visibility: visible;"></img>

  <svg width="100" height="100">
    <rect class="testcase" width="100" height="100" fill="red" style="visibility: hidden;"></rect>
  </svg>
  <svg width="100" height="100">
    <rect class="testcase" width="100" height="100" fill="green" style="visibility: visible;"></rect>
  </svg>
</div>
<div id="console"></div>
<script src="resources/compositor-touch-hit-rects.js"></script>
